<template>
  <div :class="[`${program}ranklist`, `dance-music-ranklist-${theme}`]">
    <h4>官方榜</h4>
    <div class="rank_list">
      <!-- 飙升榜 -->
      <rank-list-item
        :title="rankList[0].name.split('')"
        :bgColor="['#56a1e3', '#5a8beb']"
        :rank-id="rankList[0].id"
      ></rank-list-item>
      <!--  -->
      <rank-list-item
        :rank-id="rankList[1].id"
        :title="rankList[1].name.split('')"
        :bgColor="['#34aabe', '#56c2cd']"
      ></rank-list-item>
      <rank-list-item
        :rank-id="rankList[2].id"
        :title="rankList[2].name.split('')"
        :bgColor="['#d53d6a', '#eb638d']"
      ></rank-list-item>
      <rank-list-item
        :rank-id="rankList[3].id"
        :title="rankList[3].name.split('')"
        :bgColor="['#c7523c', '#cc7455']"
      ></rank-list-item>
      <rank-list-item
        :rank-id="rankList[4].id"
        :title="rankList[4].name.split('')"
        :bgColor="['#9455ce', '#9946c9']"
      ></rank-list-item>
    </div>
    <!-- 全球榜单 -->
    <h4>全球榜</h4>
    <div class="play-list">
      <music-list :musiclist="rankList.slice(4)"></music-list>
    </div>
  </div>
</template>
<script>
import { theme } from '../../mixin/global/theme'
import RankListItem from './childsComps/RankListItem.vue'
import { _getRankList } from '../../network/ranklist'
import musicList from '../../components/Musiclist/Musiclist.vue'
export default {
  mixins: [theme],
  components: {
    RankListItem,
    musicList
  },
  data () {
    return {
      rankList: []
    }
  },
  created () {
    // 获取排行榜数据
    _getRankList().then(res => {
      console.log(res)
      this.rankList = res.data.list
    })
  }
}
</script>
<style lang="less" scoped>
.dance-music-ranklist {
  height: 100%;
  padding: 10px 100px 0 100px;
  &-dark {
    color: #ccc;
  }
}
.rank_list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
</style>
